import React from 'react';
import { Tabs } from 'antd';
import { ApiOutlined, ToolOutlined } from '@ant-design/icons';
import BasicInfoForm from './BasicInfoForm';
import RulesConfigForm from './RulesConfigForm';

const { TabPane } = Tabs;

const ManageTabs = ({
  network,
  rules,
  basicSubmitting,
  rulesSubmitting,
  onBasicSubmit,
  onRulesSubmit
}) => {
  return (
    <div className="manage-tabs">
      <Tabs defaultActiveKey="basic" size="large">
        {/* 基本信息管理 */}
        <TabPane 
          tab={
            <span>
              <ApiOutlined />
              基本信息
            </span>
          } 
          key="basic"
        >
          <BasicInfoForm
          rm
            network={network}
            isSubmitting={basicSubmitting}
            onSubmit={onBasicSubmit}
          />
        </TabPane>

        {/* 规则配置管理 */}
        <TabPane 
          tab={
            <span>
              <ToolOutlined />
              规则配置
            </span>
          } 
          key="rules"
        >
          <RulesConfigForm
            rules={rules}
            isSubmitting={rulesSubmitting}
            onSubmit={onRulesSubmit}
          />
        </TabPane>
      </Tabs>
    </div>
  );
};

export default ManageTabs;